<template>
    <!--电销管理 已失效-->
    <div class="content_panel project_modules">
        <div class="content_panel project_modules">
            <div class="content_panel project_modules">
                <div class="content_panel_top">
                    <h3 class="panel_title">
                        <span>{{$t('salesManage.expired')}}</span>
                    </h3>
                    <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                        <el-row :gutter="20">
                            <el-col :span="4">
                                <el-form-item prop="realName"><!--姓名-->
                                    <el-input v-model="form.realName" :placeholder="$t('common.name')" type="text"
                                              clearable></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item prop="phone"><!--手机号-->
                                    <el-input v-model="form.phone" :placeholder="$t('common.mobileNumber')" type="text"
                                              clearable></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item prop="batchCode"><!--批次号-->
                                    <el-input v-model="form.batchCode" :placeholder="$t('salesManage.batchNumber')"
                                              type="text" clearable></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item prop="salesResultRecyclyStatus"><!--状态-->
                                    <el-select v-model="form.salesResultRecyclyStatus" :clearable="true" :placeholder="$t('common.status')" style="width: 100%">
                                        <el-option v-for="(item,index) in status" :key="index" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item prop="applyTime" label=""><!--分派时间-->
                                    <el-date-picker
                                            v-model="form.distributionTime"
                                            type="datetimerange"
                                            format="yyyy-MM-dd HH:mm:ss"
                                            value-format="timestamp"
                                            :editable="false"
                                            range-separator="-"
                                            :start-placeholder="$t('common.dispatchStartTime')"
                                            :end-placeholder="$t('common.dispatchEndTime')"
                                            :default-time="['00:00:00', '23:59:59']"
                                            class="el-select"
                                            style="width:100%;"
                                            clearable>
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item prop="invalidTime" label=""><!--失效时间-->
                                    <el-date-picker
                                            v-model="form.invalidTime"
                                            type="datetimerange"
                                            format="yyyy-MM-dd HH:mm:ss"
                                            value-format="timestamp"
                                            :editable="false"
                                            range-separator="-"
                                            :start-placeholder="$t('salesManage.failureStartTime')"
                                            :end-placeholder="$t('salesManage.failureEndTime')"
                                            :default-time="['00:00:00', '23:59:59']"
                                            class="el-select"
                                            style="width:100%;"
                                            clearable>
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <!--营销类型-->
                            <el-col :span="4">
                                <el-form-item prop="marketingType">
                                    <el-select v-model="form.marketingType" clearable :placeholder="$t('salesManage.marketingType')"
                                               style="width: 100%"><!--营销类型-->
                                        <el-option v-for="item in keyMap.marketingType()" :key="item.value"
                                                   :value="item.value" :label="item.label"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <!--所属APP-->
                            <el-col :span="4">
                                <el-form-item prop="appName">
                                    <select-app-list v-model="form.appName"
                                                     :placeholder="$t('common.ownedApp')"></select-app-list><!--所属APP-->
                                </el-form-item>
                            </el-col>
                            <el-col v-if="roleId === 2||roleId === 3" :span="4">
                                <el-form-item prop="salesmanName"><!--电销员-->
                                    <el-input v-model="form.salesmanName" :placeholder="$t('salesManage.salesman')" type="text" clearable></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col  v-if="roleId === 3" :span="4">
                                <el-form-item prop="salesmanGroupName"><!--电销小组-->
                                    <el-select v-model="form.salesmanGroupName" :placeholder="$t('salesManage.salesTeam')" clearable style="width:100%;">
                                        <el-option v-for="item in captainList" :key="item.username" :value="item.username" :label="item.username"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col v-if="roleId!==3" :span="4">
                                <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                                <el-button :disabled="selectedList.length===0" @click="handleBatchReject" type="primary">{{ $t('salesManage.batchReject') }}</el-button>
                            </el-col>
                        </el-row>
                        <el-row v-if="roleId===3" :gutter="20">
                            <el-col :span="8">
                                <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                                <el-button v-if="roleId===3" @click="exportExcel" type="primary">{{ $t('common.export') }}</el-button>
                                <el-button :disabled="selectedList.length===0" @click="handleBatchReject" type="primary">{{ $t('salesManage.batchReject') }}</el-button>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
        </div>

        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table :row-class-name='tableRowClassName' :data="tableData" :max-height="tableMaxHeight" @selection-change="handleSelectChange" style="width: 100%;">
                        <el-table-column type="selection" :selectable="handleSelectable"></el-table-column>
                        <!--手机号-->
                        <el-table-column prop="phone" :label="$t('common.mobileNumber')" min-width="130">
                            <template slot-scope="{ row, $index }">
                                <a @click="goDetail(row,$index)" type="text" size="small" v-if="row.phone" href="javascript:void(0);">{{ row.phone }}</a>
                            </template>
                        </el-table-column>
                        <!--姓名-->
                        <el-table-column prop="realName" :label="$t('common.name')" min-width="180"></el-table-column>
<!--                        &lt;!&ndash;用户类型&ndash;&gt;
                        <el-table-column prop="userType" :label="$t('common.userType')" min-width="100">
                            <template slot-scope="scope">{{ scope.row.userType | UserTypeTelSales }}</template>
                        </el-table-column>
                        <el-table-column prop="extraInformation" :label="$t('salesManage.informationAdditional')" :show-overflow-tooltip="true" min-width="120"></el-table-column>-->
                        <!--营销类型-->
                        <el-table-column prop="marketingType" :label="$t('salesManage.marketingType')" min-width="120">
                            <template slot-scope="{ row }">{{ keyMap.marketingType(row.marketingType) }}</template>
                        </el-table-column><!--营销类型-->
                        <!--优惠券-->
                        <el-table-column prop="couponUrl" :label="$t('common.coupons')" min-width="280">
                            <template slot-scope="{ row }">{{ !row.couponUrl ? '--' : row.couponUrl }}</template>
                        </el-table-column><!--优惠券-->
                        <!--备注-->
                        <el-table-column prop="recordRemark" :label="$t('common.remark')" :show-overflow-tooltip="true" min-width="100">
                            <template slot-scope="{ row }">
                                {{!row.recordRemark?'--':row.recordRemark}}
                            </template>
                        </el-table-column>
                        <!--<el-table-column prop="phone" :label="$t('common.call')" min-width="120">-->
                            <!--<template slot-scope="{ row }">-->
                                <!--<el-button @click="$call(row.phone)" type="text" icon="el-icon-phone">Call</el-button>-->
                            <!--</template>-->
                        <!--</el-table-column>-->
                        <!--分派时间-->
                        <el-table-column prop="distributionTime" :label="$t('tel.timeDispatch')" min-width="170">
                            <template slot-scope="scope">{{ scope.row.distributionTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <!--失效时间-->
                        <el-table-column prop="invalidTime" :label="$t('salesManage.failureTime')" min-width="170">
                            <template slot-scope="scope">{{ scope.row.invalidTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <!--电销员-->
                        <el-table-column v-if="roleId===2||roleId===3" key="salesmanName" prop="salesmanName" :label="$t('salesManage.salesman')" min-width="180" ></el-table-column>
                        <!--状态-->
                        <el-table-column prop="problemNum" :label="$t('common.status')" min-width="80">
                            <template slot-scope="scope">{{ statusSwitch(scope.row) }}</template>
                        </el-table-column>
                        <!--操作-->
                        <el-table-column v-if="roleId===2||roleId===3" prop="salesResult" key="salesResult" :label="$t('common.operation')" min-width="90" >
                            <template slot-scope="{row}">
                                <span  v-if="row.recyclingStatus===1&&row.marketingType==='1'">--</span>
                                <span v-else>
                                        <el-button @click="turnDown(row)" type="text">{{ $t('salesManage.turnDown') }}</el-button>
                                    </span>
                            </template>
                        </el-table-column>
                        <!--批次号-->
                        <el-table-column prop="batchCode" :label="$t('salesManage.batchNumber')" min-width="180"></el-table-column>
                        <!--所属APP-->
                        <el-table-column prop="appName" :label="$t('common.ownedApp')" min-width="120">
                            <template slot-scope="{ row }">{{ row.appName | switchAppName }}</template>
                        </el-table-column><!--所属APP-->
                        <el-table-column prop="productName" :label="$t('finance.productName')" min-width="180"></el-table-column><!--产品名-->
                        <!--导入备注-->
                        <el-table-column prop="remark" :label="$t('common.importRemark')" :show-overflow-tooltip="true" min-width="100">
                            <template slot-scope="{ row }">
                                {{!row.remark?'--':row.remark}}
                            </template>
                        </el-table-column>
                        <!--电销小组-->
                        <el-table-column v-if="roleId===3" prop="salesmanGroupName" key="salesmanGroupName" :label="$t('salesManage.salesTeam')" min-width="180"></el-table-column>
                    </el-table>
                    <pagination @pageChange="pageChange" :page="page">分页组件</pagination>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import Pagination from '@/components/pagination';
    import mixin from '@/service/mixin';
    import mixinTM from './mixin/mixin-tel-manage';
    import keyMap from '@/config/key-map';
    import SelectAppList from '@/components/select-app-list';

    // let that = null;
    export default {
        name: 'telemarketing-telManage-expired',
        components: {
            Pagination,
            SelectAppList,
        },
        mixins: [mixin, mixinTM],
        data() {
            return {
                keyMap,
                userStorage: this.$storage.get("user"),
                roleId: 0, //客服员角色 0：待分配 1：客服专员  2：主管 3-经理
                form: {
                    currentStatus:4,  //1 待处理 2 已处理  3 已达成  4 已失效
                    phone: '',
                    realName: '',
                    batchCode: '',
                    distributionTime: [],
                    salesResultRecyclyStatus:null,//状态 不再跟进：传salesResult=2 已回收传：recyclingStatus=1
                    salesmanName: '',
                    salesmanGroupName: '',
                    invalidTime: [],
                    marketingType: '',
                    appName: '',
                },
                totalRecord: '',
                rules: {
                    phone: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ]
                },
                status:[
                    {label:this.$t("salesManage.noFollow"),value:2},
                    {label:this.$t("salesManage.recycled"),value:1},
                ],
                captainList:[],
                selectedList: [], // 已选中数据
            };
        },
        methods: {
            tableRowClassName({row}){
                if(row.register){
                    return 'warning-row'
                }
            },
            turnDown(row){
                const params = {
                    telUserId: row.telUserId,
                    batchCode: row.batchCode,
                };
                this.$api.telSales.rejectAuditedUser(params).then(res => {
                    const { status, error, msg } = res;
                    if (status === "1" && error === "00000000") {
                        this.$message({
                            message: this.$tc('common.successfulOperation'),
                            type: 'success'
                        });
                        this.getTableData();
                    }else{
                        this.$alert(msg || this.$tc('salesManage.turnDownTips1'), this.$tc('salesManage.tips'), {
                            confirmButtonText: this.$t('common.confirm'),
                        });
                    }
                });
            },
            statusSwitch(row){
                if(row.recyclingStatus===1){
                    return this.$t('salesManage.recycled')
                }else if(row.salesResult===2){
                    return this.$t('salesManage.noFollow')
                }
            },
            // 默认查询最近三天的数据
            setDefaultTime() {
                const today = new Date();
                today.setHours(23, 59, 59, 999);
                const threeDaysAgo = new Date(today.getTime() - 3 * 24 * 60 * 60 * 1000 + 1);
                // console.log(today, today.getTime());
                // console.log(threeDaysAgo, threeDaysAgo.getTime());
                this.form.invalidTime = [threeDaysAgo.getTime(), today.getTime()]
            },
            // 判断是否可以选中
            handleSelectable(row) {
                return !(row.marketingType === '1' && row.recyclingStatus === 1);
            },
            // 选择发生改变
            handleSelectChange(selection) {
                this.selectedList = [];
                if (selection && selection.length) {
                    selection.forEach(item => {
                        this.selectedList.push({
                            batchCode: item.batchCode,
                            telUserId: item.telUserId,
                        });
                    });
                }
            },
            // 批量驳回
            handleBatchReject() {
                const params = this.selectedList;
                this.$confirm(this.$tc('salesManage.confirmRejectTips', 1, { count: params.length }), this.$tc('common.tips')).then(() => {
                    this.$api.telSales.batchRejectAuditedUser(params).then(res => {
                        const { status } = res;
                        if ('1' === status) {
                            this.$message.success(this.$tc('common.successfulOperation'));
                            this.getTableData();
                        }
                    });
                }).catch(() => {});
            },
        },
        filters: {},
        created() {
            this.setDefaultTime();
            this.getCaptainList();
            this.getUserInfo();
        }
    }
</script>
<style lang="scss">
    [data-page=telemarketing-telManage-expired] {
        .el-table .cell, .el-table th > .cell {
            word-break: keep-all;
            word-wrap: break-word;
        }
        .el-button {
            margin-bottom: 18px
        }
        .el-table__row {
            .el-button {
                margin-bottom: 0px
            }
        }
        .warning-row{
             color: #a30014 !important;
             a{
               color: #a30014 !important;
             }
        }   
    }
</style>

